<template>
	<div class="transactionSettleReport">
		<el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/transactionSettle' }">成交结算</el-breadcrumb-item>
			<el-breadcrumb-item>生成报表</el-breadcrumb-item>
		</el-breadcrumb>
		<div>
			<p>选择报表月份</p>
			<el-date-picker
			  v-model="cmonth"
			  type="month"
			  placeholder="选择月"
              @change="clearselectedInterval">
			</el-date-picker>
		</div>
		<table border="1">
			<tr>
			 <th>报表类型</th>
			 <th>操作</th>
			</tr>
			<tr>
			 <td>成交结算</td>
			 <td><a style="text-decoration: none" href="javascript:void(0);" title="" @click="bindstrandard()">{{bindtips}}</a></td>
			</tr>
		</table>
		<div style="margin: 40px 0 0 180px">	
			<el-button type="primary" @click="generateReport()">生成报表</el-button>
			<el-button type="primary" @click="cancel()">取消</el-button>
		</div>
        <!-- 选择成交结算标准列表 -->
		<el-dialog
		        title="选择成交结算标准"
		        :visible.sync="selectDialogVisible"
		        width="40%"
		        class="dialog"
		        center>
		    <div>
		        <el-row :span="24" :gutter="20">
		            <el-col :span="18">
		                <el-input
		                        placeholder="请输入版本号"
		                        prefix-icon="el-icon-search"
		                        size="normal"
		                        v-model="ruleForm.version">
		                </el-input>
		            </el-col>
		            <el-col :span="6">
		                <el-button size="normal" type="primary" @click="searchlist">查询</el-button>
		            </el-col>
		        </el-row>
		        <div style="margin-left: 60px;height: 400px;overflow-y: auto;">
		            <div class="selectedInterval-item" style="margin-bottom: 10px" v-for="item in standardlist" @click="selectradio(item.id)">
		                  <div>
		                    <el-radio @change="selectradio(item.id)" :label="item.id" v-model="selectedInterval" key="item.id" :value="item.id">&nbsp;</el-radio>
		                 </div>
                        <div class="itemwrapper">
                             <div>
                                <div>提取标准：{{item.extractStandard | filterstand}}</div>
                                <div>佣金来源： {{item.commSource | filterSource}}</div>
                                <div>提取规则： {{item.extractCategory | filterExtractionRule}}</div>
                                <!-- <div>计提节点：{{item.calculationNode ==1 ? '认购':''}}</div> -->
                                <div>版本：{{item.version}}</div>
                             </div>
                             <div style="margin-right: 60px">
                                 <a href="javascript:void(0);" title="" @click="reportDetail(item)">查看详情</a>
                             </div>
                        </div>
		            </div>
		        </div>
		     </div>
		    <span slot="footer" class="dialog-footer"  style="text-align: center !important;">
		        <el-button  type="primary" @click="bindsave">绑定</el-button>
		        <el-button @click="selectDialogVisible = false">取 消</el-button>
		    </span>
		</el-dialog>
        <!-- 列表项查看详情 -->
        <el-dialog
                title="查看详情"
                :visible.sync="dialogVisibleDetail"
                width="950px"
                class="dialog"
                center>
            <div style="max-height: 550px;overflow-y: auto;">
                <p>提取标准: {{selectDetail.extractStandard | filterstand}}</p>
                <p>佣金来源: {{selectDetail.commSource | filterSource}}</p>
                <hr>
                <div class="levellist">
                    <div class="listitem" v-for="(item,key) in projectLevelList" :key="key">
                        <h3>{{item.projectLevelName}}</h3>
                        <div>提取规则： {{item.extractCategory | filterExtractionRule}}</div>
                        <div>计提节点： {{item.calculateNodeList | calNodeFilter}}</div>
                        <div v-if="item.extractCategory==2">
                            <div v-if="item.extractBaseNum==1">计提基数：&nbsp;好生活总收入</div>
                            <div v-if="item.extractBaseNum==2">计提基数：&nbsp;好生活平台费</div>
                        </div>
                        <div v-if="item.rangeDetailList.length">
                            <el-table :data="item.rangeDetailList" border highlight-current-row style="width: 260px;margin-top: 20px;">
                                <el-table-column align="center" label="房款（万/套）">
                                    <template slot-scope="scope">
                                    <span v-if="scope.row.lowerMark === 1">
                                            {{scope.row.upper}}以下
                                        </span>
                                        <span v-else-if="scope.row.upperMark ===1">
                                            {{scope.row.lower}}以上
                                        </span>
                                        <span v-else>
                                            {{scope.row.lower}} - {{scope.row.upper}}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        property="extractAmount"
                                        :label="item.extractCategory==1?'提取金额（元）':'提取比例（%）'">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer"  style="text-align: center !important;">
                <el-button @click="dialogVisibleDetail= false">关闭</el-button>
            </span>
        </el-dialog>

	</div>
</template>

<script>
	import api from '@/api/apiPath'
    export default {
        data() {
            return {
                bindtips:'绑定标准',
                selectDetail:{},
            	cmonth:undefined,
                dialogVisibleDetail:false,
                selectDialogVisible: false,
                selectedInterval: "",
                standardlist:undefined,
                ruleForm: {
                    pageNum: 1,
                    pageSize: 1000,
                    version:undefined,
                },
                projectLevelList:[]
            }
        },
        created() {
            this.getstandard()
        },
        filters:{
            calNodeFilter(list) {
                let arr = [];
                list.forEach((item) => {
                    arr.push(item.calculateNodeName + '-' + item.calculateProportion + '%')
                });
                return arr.join(';')
            },
            filterstand(val){
                if (val == 1) {
                    return '成交标准'
                }else if(val == 2){
                     return '营收结算标准-月'
                }else if(val == 3){
                     return '营收结算标准-年 '
                }else if(val == 4){
                    return '利润结算标准'
                }
            },
            filterSource(val){
                if (val == 1) {
                    return '项目类型'
                }else if(val == 2){
                    return '开发商类型'
                }
            },
            filterExtractionRule(val){
            	if (val == 1) {
            	    return '套*金额'
            	}else if(val == 2) {
            	    return '基数*比例'
            	}
            },
        },
        methods: {
            reportDetail(val){
                this.selectDetail = val
                this.dialogVisibleDetail = true;
                this.$axios.post('/commallocation/deal/viewDeal',{dealId: val.id}).then(res=>{
                    this.projectLevelList = res.projectLevelList
                })
            },
            clearselectedInterval(){
               this.selectedInterval = ''
               this.bindtips = "绑定标准"
            },
        	selectradio(val){
        	    this.selectedInterval = +val
        	},
        	getTimeString(timestamp){
        	    if (!timestamp) {
        	        return ''
        	    }
        	    const time = new Date(timestamp)
        	    let dateStr = ''
        	    const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
        	    const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
        	    // const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
        	    dateStr = year + '-' + month
        	    return dateStr
        	},
        	bindsave(){
        		let month= this.getTimeString(this.cmonth)
        		if (this.selectedInterval =='') {
        		  this.$message({
        		      message: '请绑定标准',
        		      type: 'warning'
        		  });
        		  return
        		}
        		if (month == '') {
        		  this.$message({
        		      message: '请选择日期',
        		      type: 'warning'
        		  });
        		  return
        		}

        		this.axios.post(api.DEALSAVE,{month:month,dealId:this.selectedInterval}).then((res) => {
        		  if (res && res.data.code == 200) {
        		  	this.$message({
        		  	    message: '绑定成功！',
        		  	    type: 'success'
        		  	});

                    let interval = this.selectedInterval
                    let arr = this.standardlist.filter(function(item,index,array){
                        return item.id == interval
                    })
                    this.bindtips = arr[0].version
                    this.selectDialogVisible = false
        		   }
        		}) 
        	},
        	generateReport(){
        		let month= this.getTimeString(this.cmonth)
        		if (month == '') {
        		  this.$message({
        		      message: '请选择日期',
        		      type: 'warning'
        		  });
        		  return
        		}
        		this.axios.post(api.DEALGENERATE,{month:month}).then((res) => {
        		  if (res && res.data.code == 200) {
        		      this.$message({
        		          message: '生成报表成功',
        		          type: 'success'
        		      });
        			  this.$router.push({path:'/transactionSettle'})
        		   }
        		}) 
        	},
            searchlist(){
                this.ruleForm.pageNum = 1
                this.getstandard()
            },
        	cancel(){
				this.$router.push({path:'/transactionSettle'})
        	},
        	bindstrandard(){
        		this.selectDialogVisible = true
                this.ruleForm.version = ''
        	},
        	getstandard(){
        		//成交计提标准
        	  this.axios.post(api.getTransactionSettlementList,this.ruleForm).then((res) => {
        	    if (res && res.data.code == 200) {
        	          this.standardlist = res.data.data.list
        	     }
        	  })  
        	}
        },
    }
</script>

<style scoped lang="stylus">

	table
		 border-collapse: collapse
		 margin-top: 50px

	table, td, th 
		 border: 1px solid #ccc
		 
	td, th 
		width: 300px
		height: 40px
		text-align: center
	th 
		background-color: rgb(239, 239, 239)
		
    
    .transactionSettleReport {
        .levellist {
            display: flex;
            justify-content: space-between;
            flex-flow: wrap;
            .listitem {
                width: 50%;
                box-sizing: border-box;
                padding: 20px;
            }
        }
        
        .selectedInterval-item {
            display: flex;
            justify-content: center;
            align-items: center;
            > div:first-child {
                width: 50px;
                text-align: center;
            }
            > div:last-child {
                flex: 1;
            }
            
            .itemwrapper{
                display: flex;
                justify-content:space-between;
                align-items: center;
                text-outline: none;
                a {
                    text-decoration:none;
                }
            }
        }
    }


</style>